<template>
  <view style="background-color: rgba(255, 255, 255, 0.8);min-height: 100vh">
    <image
        src='https://mmbiz.qpic.cn/mmbiz_jpg/8iaIEbCVSqJbPf0F2swURHf3icxEk5IiboDUYjFedlbBkHWaOtOUew8rtDg6qHAecZrGY3ZT8dU83RwZiaXXkgYtPw/640?wx_fmt=jpeg&wxfrom=13&tp=wxpic'
        class="bg-set"></image>
    <view class="margin-top-xxl">
      <view class="cu-form-group">
        <view class="title">当前进度:</view>
        <input v-model="levelnow" @click="() => {
          show = true;
          type = 'now'
        }" placeholder="请选择当前天命进度"
               :disabled="true"></input>
      </view>
      <view class="cu-form-group margin-top-xxl">
        <view class="title">提升进度:</view>
        <input v-model="levelwant" @click="() => {
          show = true;
          type = 'want'
        }" placeholder="请选择想要提升的天命进度" :disabled="true"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">天命石数:</view>
        <input type="number" v-model="tms" placeholder="你目前拥有的天命石数量"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">进阶丹数:</view>
        <input type="number" v-model="jjd" placeholder="你目前拥有的进阶丹数量"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">进化石数:</view>
        <input type="number" v-model="jhs" placeholder="你目前拥有的进化石数量"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">真进化石:</view>
        <input type="number" v-model="zjhs" placeholder="你目前拥有的真进化石数量"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">圣进化石:</view>
        <input type="number" v-model="sjhs" placeholder="你目前拥有的圣进化石数量"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">武魂数量:</view>
        <input type="number" v-model="wh" placeholder="你目前拥有的武魂数量"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">武将精华:</view>
        <input type="number" v-model="wjjh" placeholder="你目前拥有的武将精华数量"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">武将金魂:</view>
        <input type="number" v-model="wjjinhun" placeholder="你目前拥有的武将金魂数量"></input>
        <button class="cu-btn bg-green shadow" @click="calc">Go!</button>
      </view>
    </view>

    <u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @cancel="show = false" closeOnClickOverlay
              @close="show =false"
    ></u-picker>
  </view>
</template>

<script>
  import kismet from "@/common/kismet";

  export default {
    data() {
      return {
        list: [],
        show: false,
        columns: [
          ['第一层', '第二层', '第三层', '第四层', '第五层', '第六层', '第七层', '第八层', '第九层', '第十层', '第十一层', '第十二层'],
          ['第一个', '第二个', '第三个', '第四个', '第五个']
        ],
        columnData: [
          ['第一个', '第二个', '第三个', '第四个', '第五个'],
          ['第一个', '第二个', '第三个', '第四个', '第五个'],
          ['第一个', '第二个', '第三个', '第四个', '第五个'],
          ['第一个', '第二个', '第三个', '第四个', '第五个'],
          ['第一个', '第二个', '第三个', '第四个', '第五个'],
          ['第一个', '第二个', '第三个', '第四个', '第五个'],
          ['第一个', '第二个', '第三个', '第四个', '第五个'],
          ['第一个', '第二个', '第三个', '第四个', '第五个'],
          ['第一个', '第二个', '第三个', '第四个', '第五个'],
          ['第一个', '第二个', '第三个', '第四个', '第五个'],
          ['第一个', '第二个', '第三个', '第四个', '第五个'],
          ['第一个', '第二个', '第三个', '第四个', '第五个']
        ],
        levelnow: "",
        level_now: [],
        levelwant: "",
        level_want: [],
        type: "",
        tms: "",
        jjd: "",
        jhs: "",
        zjhs: "",
        sjhs: "",
        wh: "",
        wjjh: "",
        wjjinhun: ""
      }
    },
    onLoad() {
      this.list = kismet()

      this.adOption = {
        adUnitId: 'adunit-26fefa0988783f83'
      };
      // 创建广告实例
      this.createInterstitialAd();
    },
    methods: {
      // 回调参数为包含columnIndex、value、values
      confirm(e) {
        this.show = false
        switch (this.type) {
          case "now":
            this.levelnow = e.value[0] + e.value[1]
            this.level_now = e.indexs
            break
          case "want":
            this.levelwant = e.value[0] + e.value[1]
            this.level_want = e.indexs
            break
        }
      },
      calc() {
        if (!this.levelwant) {
          uni.showToast({
            title: "请输入想要提升的天命进度",
            icon: "none"
          })
          return
        }

        if (this.level_want[0] < this.level_now[0]) {
          uni.showToast({
            title: "想要提升的天命进度可不能小于等于当前天命进度哟~",
            icon: "none"
          })
          return
        } else if (this.level_want[0] === this.level_now[0]) {
          if (this.level_want[1] <= this.level_now[1]) {
            uni.showToast({
              title: "想要提升的天命进度可不能小于等于当前天命进度哟~",
              icon: "none"
            })
            return
          }
        }

        let tms = 0
        let jjd = 0
        let jhs = 0
        let zjhs = 0
        let sjhs = 0
        let wh = 0
        let wjjh = 0
        let wjjinhun = 0
        let list = []
        if (!this.levelnow) {
          list = this.list.filter(item => item.floor < this.level_want[0] + 1 || (item.floor === this.level_want[0] + 1 &&
              item.no <=
              this.level_want[1] + 1))
        } else {
          list = this.list.filter(item => {
            if (this.level_now[1] === 4) {
              return (item.floor < this.level_want[0] + 1 && item.floor > this.level_now[0] + 1) || (item.floor ===
                  this.level_want[0] + 1 && item.no <= this.level_want[1] + 1)
            } else {
              if (this.level_want[0] === this.level_now[0]) {
                return item.floor === this.level_want[0] + 1 && item.no > this.level_now[1] + 1 && item.no <= this.level_want[1]
                    + 1
              } else {
                return ((item.floor < this.level_want[0] + 1 && item.floor > this.level_now[0] + 1) || (item.floor ===
                    this.level_want[0] + 1 && item.no <= this.level_want[1] + 1)) || (item.floor === this.level_now[0] + 1 &&
                    item.no > this.level_now[1] + 1)
              }

            }
          })
        }

        list.forEach(item => {
          tms += item.tms
          jjd += item.jjd
          jhs += item.jhs
          zjhs += item.zjhs
          sjhs += item.sjhs
          wh += item.wh
          wjjh += item.wjjh
          wjjinhun += item.wjjinhun
        })
        uni.showModal({
          title: "报告大佬",
          content:
              `天命点到${this.levelwant}还需要: ${tms - this.tms
              }个天命石, ${jjd - this.jjd}个进阶丹, ${jhs - this.jhs}个进化石, ${zjhs - this.zjhs
              }个真进化石, ${sjhs - this.sjhs}个圣进化石, ${wh - this.wh}个武魂, ${wjjh - this.wjjh}个武将精华, ${wjjinhun - this.wjjinhun}个武将金魂`,
          showCancel: false
        })
      },
      createInterstitialAd() {
        let interstitialAd = this.interstitialAd = uni.createInterstitialAd(this.adOption);
        interstitialAd.onLoad(() => {
          this.showInterstitialAd()
        });
      },
      showInterstitialAd() {
        this.interstitialAd.show().then(() => {
        });
      }
    }
  }
</script>

<style scoped lang="less">
  .bg-set {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .card {
    background-image: url('https://mmbiz.qpic.cn/mmbiz_jpg/8iaIEbCVSqJbzn8EBicGrlic9YeTrxFUzOb1fWIVWBnI0HLXUGDIBxFb9toyyZ6XdB7m4QMv36DIsgkU4mm4Z1RLg/640?wx_fmt=jpeg&wxfrom=13&tp=wxpic');
    background-size: cover;
    background-position: center center;
  }

  .cu-form-group {
    background-color: transparent;
  }
</style>
